<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    网站头部（logo、导航）
    文章标题和元信息
    文章内容（包含多个段落和小节）
    相关文章侧边栏
    页面底部 
    -->
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #parentsBox {
            margin: 0 auto;
            width: 400px;
            height: 750px;
            background-color: gray;
        }

        img {
            width: 400px;
        }

        #topnav {
            width: 400px;
            height: 60px;
        }

        #topnav ul li {
            line-height: 60px;
            width: 200px;
            float: left;
            text-align: center;
        }

        .selected {
            background-color: aqua;
        }

        main aside {
            width: 100px;
            float: left;
        }

        main aside ul {
            width: 100px;
        }

        main aside ul li {
            width: 90px;
            text-align: center;
            padding: 15px 5px;
        }

        main article {
            width: 300px;
            height: 306px;
            float: left;
        }

        main article header {
            width: 300px;

            float: left;
            font-weight: bolder;
            text-align: center;
            line-height: 50px;
            font-size: 20px;

        }

        main article span {
            display: block;
            width: 300px;
            line-height: 20px;
            font-size: 10px;
            text-align: center;
        }

        footer {
            float: left;
            width: 400px;
            height: 150px;
            font-size: 30px;
            margin: 0 auto;
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="parentsBox">
        <header>
            <figure><img src="../img/Shimano.png" alt="Error"></figure>
            <nav id="topnav">
                <ul>
                    <li><a href="">山地自行车</a></li>
                    <li class="selected"><a href="">公路自行车</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <aside>
                <ul>
                    <li class="selected"><a href="">Dura-Ace</a></li>
                    <li><a href="">Ultegra</a></li>
                    <li><a href="">105</a></li>
                    <li><a href="">Tiagra</a></li>
                    <li><a href="">Sora</a></li>
                    <li><a href="">Claris</a></li>
                </ul>
            </aside>
            <article>
                <header>关于Dura-Ace套件的固件更新</header>
                <span>shimano</span>
                <section>
                    尊敬的用户：<br>
                    禧玛诺 DA 套件固件更新说明：<br>
                    优化电子变速响应，换挡延迟减 15%，复杂路况更精准；提升低温环境碟刹线性控制，刹车手感更稳定；修复码表连接断连问题，增强设备兼容性；新增竞赛模式电量保护，延长续航。<br>
                    更新需通过 E-TUBE PROJECT，电量≥50%，过程勿断连。详询官方服务中心。

                </section>
            </article>

        </main>
        <footer>
            哇，密码的，正常人TM的会嵌套这么多盒子，样式写到死，语义化标签狗都不用！！
        </footer>
    </div>
</body>

</html>